<template>
  <div class="search">
    <!-- 
      v-model:绑定输入框的值
      fetch-suggestions:的回调在输入框聚焦和输入停止.3s时执行(防抖延时)
      trigger-on-focus:聚焦时是否执行fetch-suggestions的回调 
      @select:选择建议时触发
    -->
    <el-autocomplete
      v-model="hosname"
      :fetch-suggestions="fetchData"
      :trigger-on-focus="false"
      @select="goDetail"
      placeholder="请您输入医院名称"
      style="width: 600px; margin-right: 10px"
    />
    <el-button type="primary" size="large" icon="Search" @click=""></el-button>
  </div>
</template>

<script setup lang="ts" name="Search">
import { reqHospitalInfo } from '@/api/home'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

// 存储输入框输入的医院关键字
let hosname = ref('')
// 创建路由器对象
const router = useRouter()

// fetch-suggestions属性的回调函数 当用户输入完毕.3s后执行
// 根据输入的医院关键字获取医院列表,进行展示
// 自动注入两个参数:keyWord:输入框的值  callback:提供展示数据的回调函数
const fetchData = async (keyWord: string, callback: any) => {
  let result = await reqHospitalInfo(keyWord)
  if (result.code === 200) {
    // callback返回用于展示的数组内对象必须有value属性
    // 整理数据变成组件需要的格式
    let showData = result.data.map((item) => {
      return {
        value: item.hosname, // value属性用于展示数据
        hoscode: item.hoscode, // 存储医院编码用于日后进行路由跳转传参
      }
    })
    // 调用callback函数,将整理好的数据传递给组件进行展示
    if (showData.length === 0) {
      callback([{ value: '暂无此医院数据' }])
    } else {
      callback(showData)
    }
  }
}
// 选择建议时的回调,进行路由跳转到详情页,并携带query参数
// 自动注入当前选择的对象 item:Proxy{value:'北京大学第一医院',hoscode:'1000_2'}
const goDetail = (item: any) => {
  // 编程式路由导航进行跳转
  router.push({
    name: 'register',
    query: {
      hoscode: item.hoscode,
    },
  })
}
</script>

<style scoped lang="scss">
.search {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
  /*深度选择器: >>> /deep/ ::v-deep*/
  // 使用深度选择器修改inputUI组件的样式
  :deep(.el-input__inner) {
    height: 40px;
    font-size: 16px;
  }
  // 使用深度选择器修改buttonUI组件的样式
  :deep(.el-button) {
    height: 40px;
  }
  // 使用深度选择器修改iconUI组件的样式
  :deep(.el-icon) {
    height: 15px;
    height: 15px;
  }
}
</style>
